<template>
  <div>
    <el-button
      style="color:black;fontSize:15px"
      icon="el-icon-back"
      type="text"
      @click="$router.back()"
    >返回
    </el-button>

    <div class="content">
      <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">基本信息</el-menu-item>

          <el-menu-item index="2">驾驶证信息</el-menu-item>
        </el-menu>
      </div>
      <div v-show="activeIndex === '1'">
        <el-form>
          <div class="detail">
            <el-row :gutter="24">
              <el-col :span="8">
                <div class="marginText">
                  <span class="span-title">员工编号:</span><span v-if="!isEditing">{{ staffForm.userId }}</span>
                  <el-input v-else v-model="staffForm.userId" style="width: 200px;" disabled />
                </div>
              </el-col>
              <el-col :span="8">
                <span class="span-title">司机名称:</span><span v-if="!isEditing">{{ staffForm.name }}</span>
                <el-input v-else v-model="staffForm.name" style="width: 200px;" disabled />
              </el-col>
              <el-col :span="8">
                <span class="span-title">所属机构:</span><span v-if="!isEditing">{{ staffForm.agency }}</span>
                <el-input v-else v-model="staffForm.agency" style="width: 200px;" disabled />
              </el-col>
              <el-col :span="8">
                <span class="span-title">司机电话:</span><span v-if="!isEditing">{{ staffForm.mobile }}</span>
                <el-input v-else v-model="staffForm.mobile" style="width: 200px;" disabled />
              </el-col>
              <el-col :span="8">
                <span class="span-title">司机年龄:</span><span v-if="!isEditing">{{ staffForm.age }}</span>
                <el-input v-else v-model="staffForm.age" style="width: 200px;" />
              </el-col>
            </el-row>
          </div>
          <el-row justify="center" align="middle">
            <el-col>
              <el-button v-if="!isEditing" type="primary" @click="isEditing=true">编辑</el-button>
              <el-button v-if="isEditing" type="danger" @click="keep">保存</el-button>
              <el-button v-if="isEditing" type="danger" @click="isEditing= false">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 驾驶证信息 -->
      <div v-show="activeIndex === '2'">
        <el-form>
          <div class="detail">
            <el-row :gutter="24">
              <el-col :span="8">
                <div class="marginText">
                  <span class="span-title">驾驶证号:</span><span v-if="!isVisible">{{ drivingForm.licenseNumber }}</span>
                  <el-input v-else v-model="drivingForm.licenseNumber" style="width: 200px;" />
                </div>
              </el-col>
              <el-col :span="8">
                <span class="span-title">准假车型:</span><span v-if="!isVisible">{{ drivingForm.allowableType }}</span>
                <el-input v-else v-model="drivingForm.allowableType" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">初次领证日期:</span><span v-if="!isVisible">{{ drivingForm.initialCertificateDate }}</span>
                <el-input v-else v-model="drivingForm.initialCertificateDate" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">驾驶证有效期限:</span><span v-if="!isVisible">{{ drivingForm.validPeriod }}</span>
                <el-input v-else v-model="drivingForm.validPeriod" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">驾龄:</span><span v-if="!isVisible">{{ drivingForm.driverAge }}</span>
                <el-input v-else v-model="drivingForm.driverAge" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">驾驶证类型:</span><span v-if="!isVisible">{{ drivingForm.licenseType }}</span>
                <el-input v-else v-model="drivingForm.licenseType" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">从业资格证:</span><span v-if="!isVisible">{{ drivingForm.qualificationCertificate }}</span>
                <el-input v-else v-model="drivingForm.qualificationCertificate" style="width: 200px;" />
              </el-col>
              <el-col :span="8">
                <span class="span-title">入场证信息:</span><span v-if="!isVisible">{{ drivingForm.passCertificate }}</span>
                <el-input v-else v-model="drivingForm.passCertificate" style="width: 200px;" />
              </el-col>

            </el-row>

            <div class="img-title">
              <el-row :gutter="20">
                <el-col :span="4"><div>   <span class="span-title">图片信息</span></div></el-col>
                <el-col :span="16"><div>
                  <span v-if="!isVisible" class="img">
                    <img style="width: 200px; height: 150px; margin-right: 20px;" src="https://img0.baidu.com/it/u=613249575,2291791710&fm=253&fmt=auto&app=120&f=JPEG?w=993&h=701" alt="">
                    <img style="width: 200px; height: 150px;" src="https://img0.baidu.com/it/u=613249575,2291791710&fm=253&fmt=auto&app=120&f=JPEG?w=993&h=701" alt="">
                  </span>
                  <div v-else>
                    <el-upload
                      action=""
                      list-type="picture-card"
                      :on-exceed="handleExceed"

                      :file-list="fileList"
                      :limit="2"
                    >
                      <i class="el-icon-plus" />
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </div>

                </div>
                </el-col>
              </el-row>
            </div>

          </div>
          <el-row justify="center" align="middle">
            <el-col>
              <el-button v-if="!isVisible" type="primary" @click="isVisible=true">编辑</el-button>
              <el-button v-if="isVisible" type="danger" @click="edit">保存</el-button>
              <el-button v-if="isVisible" type="danger" @click="isVisible=false">取消</el-button>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </div>

  </div>
</template>

<script>
import { getDriverDetailAPI, getDrivingLicenceAPI, updateDriverMessageAPI } from '@/api/staffManagement'
export default {
  data() {
    return {
      activeIndex: '1',
      isEditing: false,
      isVisible: false,
      // 基本信息
      staffForm: {
        id: '',
        userId: '', // 司机id
        name: '', // 司机姓名
        avatar: '', // 头像
        agency: '', // 所属机构
        mobile: '', // 手机号
        age: '', // 年龄
        workNumber: '', // 工号
        workStatus: ''// 工作状态

      },
      // 驾驶证详细
      drivingForm: {
        id: '',
        userId: '',
        licenseNumber: '', // 驾驶证号
        allowableType: '', // 准驾车型
        initialCertificateDate: '', // 初次领证日期
        validPeriod: '', // 有效期限
        driverAge: '', // 驾龄
        licenseType: '', // 驾驶证类型
        qualificationCertificate: '', // 从业资格证信息
        passCertificate: '', // 入场证信息
        picture: ''// 图片
      },
      fileList: [{ name: 'food.jpeg', url: 'https://img0.baidu.com/it/u=613249575,2291791710&fm=253&fmt=auto&app=120&f=JPEG?w=993&h=701' },
        { name: 'food.jpeg', url: 'https://img0.baidu.com/it/u=613249575,2291791710&fm=253&fmt=auto&app=120&f=JPEG?w=993&h=701' }
      ],
      dialogVisible: false,
      dialogImageUrl: 'https://img0.baidu.com/it/u=613249575,2291791710&fm=253&fmt=auto&app=120&f=JPEG?w=993&h=701'

    }
  },
  created() {
    this.getDriverDetail()
  },
  methods: {
    async getDriverDetail() {
      if (this.$route.params.id) {
        // 基本信息
        const res = await getDriverDetailAPI(this.$route.params.id)
        console.log('基本信息  ----->  ', res)
        this.staffForm.userId = res.userId
        this.staffForm.id = res.id
        this.staffForm.name = res.name
        this.staffForm.avatar = res.avatar
        this.staffForm.agency = res.agency.name
        this.staffForm.mobile = res.mobile
        this.staffForm.age = res.age
        this.staffForm.workNumber = res.account
        this.staffForm.workStatus = res.workStatus
      }
    },

    // 司机信息详细跳转
    async handleSelect(index) {
      this.activeIndex = index
      // 获取驾驶证信息
      if (index === '2') {
        const res = await getDrivingLicenceAPI(this.$route.params.id)
        console.log('驾驶证详细  ----->  ', res)
        this.drivingForm = res
      }
    },
    async keep() {
      const res = await updateDriverMessageAPI(this.staffForm)
      console.log('保存司机信息  ----->  ', res, this.staffForm)
      this.getDriverDetail()
      this.isEditing = false
      setTimeout(() => {
        this.$message.error('演示系统! 不允许修改!')
        this.isVisible = false
      }, 500)
    },
    edit() {
      setTimeout(() => {
        this.$message.error('演示系统! 不允许修改!')
        this.isVisible = false
      }, 500)
      setTimeout(() => {
        this.$message.error('接口异常! 请联系后端老师!')
      }, 1500)
    },
    handleExceed(files, fileList) {
      this.$message.error('最多上传 2 张图片')
      setTimeout(() => {
        this.$message.error('演示系统! 不允许修改!')
      }, 3500)
    }
  }
}
</script>

<style scoped lang="scss">
.content{
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    height: 450px;
    .detail{
        margin: 20px 40px;
        line-height: 40px;
           .span-title {
          margin-right: 20px;
          }

    }
    .img-title{
      margin-top: 20px;
    }
}
</style>
